<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>
<body>
    <div name="houdunren">houdunren.com</div>
    <input type="text" name="username" />
    <div id="app">
        <span>houdunren.com</span>
        <span>hdcms.com</span>
    </div>

    <div class="houdunren hdcms xiangjun">houdunren.com</div>
    <div class="hdcms">hdcms.com</div>
    
    <script>
        //getElementsByName
        // const div = document.getElementsByName('houdunren');
        // console.dir(div);
        // const input = document.getElementsByName('username');
        // console.dir(input);

        //getElementByTagName
        //使用getElementsByTagName用于按标签名获取元素
        //返回htmlCollection节点列表对象
        //是不区分大小写的获取
        // const divs = document.getElementsByTagName('div');
        // console.log(divs);

        //通配符
        //可以通过*获取所有的元素
        // const nodes = document.getElementsByTagName('*');
        // console.log(nodes);

        // const nodes = document.getElementsByTagName('*').namedItem('app').getElementsByTagName('*');
        // console.log(nodes);

        //getElementsByClassName
        //getElementsByclassName用于按照class样式属性获取元素集合
        //设置多个值的时与顺序无关,指包含这些class属性的元素

        
        // const nodes = document.getElementsByClassName('hdcms');
        // console.log(nodes.length);

        //查找包含class属性包括hdcms与后盾人的元素
        // const tags = document.getElementsByClassName('hdcms houdunren');
        // console.log(tags.length);

    </script>
</body>
</html>